<template>
  <div class="home-container">
      <!-- 四个功能模块 -->
      <div class="function-module">
          <div class="module-item" @click="goToCreatePaper">
              <img src="../assets/img/创建试卷.png" alt="创建试卷">
              <div class="span">
                  <span>创建试卷</span>
                  <span>{{ paperCount }}</span>
              </div>
          </div>
          <div class="module-item" @click="goToQuestionBank">
              <img src="../assets/img/题库管理.png" alt="题库管理">
              <div class="span">
                  <span>题库管理</span>
                  <span>0</span>
              </div>
          </div>
          <div class="module-item" @click="goToStudentManagement">
              <img src="../assets/img/学生管理.png" alt="学生管理">
              <div class="span">
                  <span>学生管理</span>
                  <span>0</span>
              </div>
          </div>
      </div>
      <!-- 柱状图容器 -->
      <div id="bar-chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { useRouter } from 'vue-router';

const router = useRouter();
const paperCount = ref(0);

// 跳转到创建试卷页面
const goToCreatePaper = () => {
  router.push('/main/paper/create');
};

// 跳转到题库管理页面
const goToQuestionBank = () => {
  router.push('/main/question/bank');
};

// 跳转到学生管理页面（假设存在对应的路由）
const goToStudentManagement = () => {
  router.push('/main/student/manage');
};

// 获取试卷数量
const getPaperCount = () => {
  const storedPapers = localStorage.getItem('paperList');
  if (storedPapers) {
    const papers = JSON.parse(storedPapers);
    paperCount.value = papers.length;
  }
};

onMounted(() => {
  // 初始化柱状图
  const chartDom = document.getElementById('bar-chart');
  const myChart = echarts.init(chartDom);
  const option = {
      legend: {
          data: ['班级平均分', '个人成绩'],
          bottom: '10px' // 将图例放置在图表底部，距离底部 10px
      },
      xAxis: {
          type: 'category',
          data: ['语文', '数学', '英语', '物理', '化学', '生物']
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              name: '班级平均分',
              data: [80, 90, 85, 70, 75, 82],
              type: 'bar',
              itemStyle: {
                  color: 'blue'
              }
          },
          {
              name: '个人成绩',
              data: [90, 85, 90, 80, 70, 90],
              type: 'bar',
              itemStyle: {
                  color: 'pink'
              }
          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  
  // 获取试卷数量
  getPaperCount();
});
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.function-module {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.module-item {
  display: flex; /* 使用 flex 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 设置图片和文字之间的间距 */
  cursor: pointer; /* 添加鼠标指针样式 */
}

.module-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

.span {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>